<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/code.js"></script>
  <style>
    #createCode {
      user-select: none;
    }

    .right {
      font-size: 12px;
      color: green;
    }

    .err {
      font-size: 12px;
      color: red;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>
      <label for="">用户名:</label>
      <input type="text" id="user">
      <span id="user_span"></span>
    </p>
    <p>
      <label for="">密&emsp;码:</label>
      <input type="password" id="pwd">
      <span id="pwd_span"></span>
    </p>
    <p>
      <input id="regBtn" type="submit" value="登录">
      <input id="retBtn" type="reset" value="取消">
    </p>
  </div>
</body>
<script>
  // 注册过程中 所有信息均合法 => 把数据存储到cookie(模拟),跳转登录

  // 用户输入的 用户名和密码 和cookie存储的 保持统一
  // 相同 => 跳转index 否则 => 用户名或密码有误

  // 主页面
  // 有用户 => 欢迎,xxx 没有用户 => 亲,请登录

  var userInp = document.getElementById('user');
  var pwdInp = document.getElementById('pwd');
  var regBtn = document.getElementById('regBtn');
  var retBtn = document.getElementById('retBtn');




  regBtn.onclick = function () {
    var user = userInp.value;
    var pwd = pwdInp.value;
    console.log(pwd);
    if (user == getCookie(user)) {
      // console.log(user);
      if (pwd == getCookie(pwd)) {
        // console.log(pwd);
        location.href = 'index.html';
      } else {
        alert('密码错误')
      }
    } else {
      alert('用户名错误')
    }

  }












  // key  键名
  // val  键值
  // day  过期时间
  // path  存储路径
  function setCookie(key, val, day, path = "/") {

    // var val = "a123123";
    if (day) {   // 有过期时间
      var date = new Date();
      date.setDate(date.getDate() + day);
      document.cookie = key + "=" + val + ";expires=" + date.toUTCString() + ";path=" + path;
    } else {
      document.cookie = key + "=" + val + ";path=" + path;
    }
  }


  function getCookie(key) {
    var cookie = document.cookie;
    // console.log(cookie);
    if (cookie) {  //有cookie时
      var list = cookie.split("; ");
      // console.log(list); //  ["user=a123123", "pwd=123123", "phone=17386141517", "email=1272071495@qq.com"]
      for (var i = 0; i < list.length; i++) {
        var item = list[i]; // "user=a123123", "pwd=123123",
        var name = item.split("=")[0];
        var val = item.split("=")[1];
        if (name === key) {
          return val;
        }
      }
    }
    return "";
  }

      // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头

    // 判断的流程  从易到难的顺序 
    // a. 长度  6-12位 
    // b. 不能以数字开头
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _    6-12位 

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111  A1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA                      强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3 

    // 确认密码  
    // 和密码相同  

    // 验证码  => 封装一个方法可以随机生成四位验证码 (0-9 a-z A-Z )
    // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z )   => createCode
    // 2. 点击 验证码 进行切换
    // 3. 验证码输入判断  (输入的  随机生成的  保持一致) 
</script>
<script>






</script>


</html>